<template>
	<div class="warpper">

		<van-tabs sticky title-active-color="red" color="#fff" @click="onClick">
			<van-tab title="综合" name="1"></van-tab>
			<van-tab name="2">
				<template #title>
					价格
					<van-icon name="sort" />
				</template>
			</van-tab>
			<van-tab title="新品" name="3"></van-tab>
			<!-- <van-tab  name="4">	<template #title>
					销量
					<van-icon name="sort" />
				</template>
			</van-tab> -->
		</van-tabs>
		<template v-if="list.length<1">
			<van-empty description="空空如也!" />
		</template>
		<div style="margin-top: 10px;">
			<van-grid :column-num="2" :gutter="10">
				<van-grid-item
v-for="(item, index) in list"
:key="index"
					:to="'/productDetails?id='+item.id+'&integral='+integral">
					<van-image :src="imgUrls+item.image" height="140" />
					<span>
						<font size="2">{{ item.storeName }}</font>
					</span>
					<span>
						<font size="4" color="#ff8001" v-if="integral">{{item.integral}}积分</font>
						<font size="4" color="#ff8001" v-else>￥{{ item.price }}</font>
					</span>
				</van-grid-item>
			</van-grid>

			<van-divider v-if="list.length>9" @click="move(name,val)">点击加载更多</van-divider>
		</div>
	</div>
</template>

<script>
import {
  getProductList
} from '@/api/product.js'
export default {
  data() {
    return {
      integral: false,
      list: [],
      imgUrls: this.$baseApi,
      salesSort: 'desc',
      limit: 10,
      priceOrder: 'desc',
      name: null,
      val: null
    }
  },
  created() {
    this.index()
  },
  methods: {
    goto(data) {
      this.$router.push({
        name: 'ProductDetails',
        query: {
          integral: data
        }
      })
    },
    onClick(name, title) {
      if (name == 1) {
        this.move()
      } else if (name == 2) {
        if (this.priceSort == 'desc') {
          this.priceSort = 'asc'
          this.move('priceOrder', 'desc')
        } else {
          this.priceSort = 'desc'
          this.move('priceOrder', 'asc')
        }
      } else if (name == 3) {
        this.move('news', 1)
      } else if (name == 4) {
        if (this.salesSort == 'desc') {
          this.salesSort = 'asc'
          this.move('salesSort', 'desc')
        } else {
          this.salesSort = 'desc'
          this.move('salesSort', 'asc')
        }
      }
    },
    move(name, val) {
      if (this.name == name) {
        this.limit += 10
      } else {
        this.limit = 0
        this.limit += 10
      }
      this.name = name
      this.val = val
      this.index(name, val, this.limit)
    },
    index(name, val, limit) {
      const map = {}
      map['sid'] = this.$route.query.sid ? this.$route.query.sid : ''
      map['isIntegral'] = this.$route.query.integral ? 1 : 0
      map[name] = val
      map['limit'] = limit
      getProductList(map).then(res => {
        this.list = res.data.content
      })

      if (this.$route.query.integral) {
        this.$route.meta.title = '积分商品'
        this.integral = true
      } else {
        this.$route.meta.title = '商品列表'
        this.integral = false
      }
    }
  }
}
</script>

<style scoped>
	.warpper {
		background-color: #F8F8F8;
		padding: 5px;
	}
</style>
